<template>
  <section class="quick-actions">
    <div class="section-header">
      <h2>快捷功能</h2>
    </div>
    <div class="action-grid">
      <div 
        class="action-card" 
        v-for="action in actions" 
        :key="action.id" 
        @click="handleClick(action)"
      >
        <div class="action-icon" :style="{ background: action.gradient }">
          <span class="icon-text">{{ action.icon }}</span>
        </div>
        <span class="action-name">{{ action.name }}</span>
      </div>
    </div>
  </section>
</template>

<script setup>
import { ref } from 'vue'

const emit = defineEmits(['action'])

// 快捷功能配置
const actions = ref([
  { id: 'water-query', name: '水情查询', icon: '💧', gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', route: '/pages/water/index' },
  { id: 'rain-monitor', name: '雨情监测', icon: '🌧️', gradient: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)', route: '/pages/rain/index' },
  { id: 'warning', name: '预警信息', icon: '⚠️', gradient: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)', route: '/pages/warning/index' },
  { id: 'statistics', name: '数据统计', icon: '📊', gradient: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)', route: '/pages/statistics/index' },
  { id: 'map', name: '地图展示', icon: '🗺️', gradient: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)', route: '/pages/map/index' },
  { id: 'history', name: '历史数据', icon: '📈', gradient: 'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)', route: '/pages/history/index' },
  { id: 'report', name: '报表导出', icon: '📋', gradient: 'linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%)', route: '/pages/report/index' },
  { id: 'more', name: '更多功能', icon: '⚙️', gradient: 'linear-gradient(135deg, #d299c2 0%, #fef9d7 100%)', route: '/pages/more/index' },
])

function handleClick(action) {
  emit('action', action)
}
</script>

<style scoped>
.quick-actions {
  width: 100%;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.section-header h2 {
  font-size: 18px;
  font-weight: 600;
  color: #f1f5f9;
  margin: 0;
}

.action-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.action-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.3s;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.action-card:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}

.action-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}

.action-name {
  font-size: 14px;
  color: #e2e8f0;
}

@media (max-width: 768px) {
  .action-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
  }
  
  .action-card {
    padding: 16px 8px;
  }
  
  .action-icon {
    width: 44px;
    height: 44px;
    font-size: 22px;
  }
  
  .action-name {
    font-size: 12px;
  }
}
</style>

